<template>
  <el-checkbox-group class="z-checkbox-group" v-model="values" v-on="$listeners">
    <z-check-box v-for="(item, i) in groups" :key="i" :label="item.label">
      <z-builder :name="item.builder" :item="item" />
    </z-check-box>
  </el-checkbox-group>
</template>

<script>
import ZCheckBox from "./ZCheckBox";
import ZBuilder from "../ZBuilder";
export default {
  name: "ZCheckBoxGroup",
  components: { ZCheckBox, ZBuilder },
  props: {
    groups: {
      type: Array,
      default: () => [],
    },
    defaultValues: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return { values: [] };
  },
  watch: {
    defaultValues: {
      immediate: true,
      deep: true,
      handler(v) {
        this.values = v;
      },
    },
  },
};
</script>

<style></style>
